<template>
  <div class="dict">
    <el-button type="danger" @click="download" plain size="mini"
      >下载</el-button
    >
    <div class="dict-search">
      <Search
        @search="searchDict"
        @queryTenant="queryTenant"
        @queryDictType="queryDictType"
        :tenantData="tenantList"
      />
    </div>
    <div class="dict-oper">
      <Operation @removeDict="removeDict" @removeDictType="removeDictType" />
    </div>
    <div class="dict-main">
      <Main
        @removeDict="removeDict"
        @searchDict="searchDict"
        :dictData="dictPage"
      />
    </div>
  </div>
</template>

<script>
import Search from "./searchComp.vue";
import Operation from "./operComp.vue";
import Main from "./mainComp.vue";
import { download } from "@/api/dict.js";

export default {
  components: {
    Search,
    Operation,
    Main,
  },
  data() {
    return {
      tenantList: [],
      dictTypeList: [],
      dictPage: {},
      dictSear: {},
      removeDictIds: [],
      dictTypeSear: {},
    };
  },
  created() {},
  mounted() {
    this.searchDict();
  },
  methods: {
    // 查询字典
    searchDict() {
      this.$store.dispatch("dict/listDict").then((req) => {
        this.dictPage = req.data;
      });
    },
    // 查询字典创建人
    queryTenant() {
      this.$store.dispatch("dict/queryTenantOfCreateDict").then((req) => {
        this.tenantList = req.data == null ? [] : req.data;
      });
    },
    queryDictType() {
      this.$store.dispatch("dict/queryDictType").then((req) => {
        this.dictTypeList = req.data == null ? [] : req.data;
      });
    },
    // 执行删除字典
    removeDict() {
      this.$confirm("此操作将永久删除该字典, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("dict/removeDictByIds").then((req) => {
            this.searchDict();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除字典类型
    removeDictType(dictTypeIds) {
      if (dictTypeIds == null || dictTypeIds.length < 0) {
        this.$message.error("请选中需要删除字典类型项");
        return;
      }
      this.$confirm("此操作将永久删除该字典类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store
            .dispatch("dict/removeDictTypeByIds", dictTypeIds)
            .then((req) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    download() {
      download()
        .then((res) => {
          console.log('res->',res);
          const blob = new Blob([res]);
          console.log('blob->',blob);
          const link = document.createElement("a");
          const href = window.URL.createObjectURL(blob); // 创建下载的链接
          link.href = href;
          link.download = "XXXX.xls"; // 下载后文件名
          document.body.appendChild(link);
          link.click(); // 点击下载
          document.body.removeChild(link); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        })
        .catch((err) => {
          console.log("error");
        });
    },
  },
};
</script>

<style>
.dict {
  display: flex;
  flex-direction: column;
  padding: 1%;
}

.dict-search {
  height: 10vh;
}

.dict-oper {
  height: 5vh;
}

.dict-main {
  flex: 1;
}
</style>
